Bootstrap With Different Order on Mobile Version

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div style="border: 1px solid red" class="col-sm-4 col-lg-push-8 col-sm-push-7">
      content
   </div>
   <div style="border: 1px solid green" class="col-lg-8 col-sm-7 col-sm-pull-4">
      <div class="post-media">
            <div id="slider" class="flexslider">
               <ul class="slides">
                  <li></li>
               </ul>
            </div>
            <div id="carousel" class="flexslider">
               <ul class="slides">
                  <li></li>
               </ul>
            </div>
      </div>
      <div class="row mTop-20">
            <div class="col-sm-5 col-lg-12">
               content
            </div>
      </div>
   </div>
</div>

Bootstarp 4 - how to change order of cols in different rows for mobile

You can't change the order of columns in separate rows because they don't share the same flexbox parent (the row). The solution is to put the columns in the same parent .row...

  <div class="row d-flex justify-content-around mb-5">
        <div id="selectProductCol" class="col-sm-12 col-lg-5 pb-5">
            <div class="d-flex flex-column">
                <div class="d-flex justify-content-between">
                    <mat-placeholder class="placeholder mr-3 mb-1">בחר סוג מוצר</mat-placeholder>
                    <span class="ml-3" matSuffix matTooltip="סוג מוצר" matTooltipPosition='right'>
                    </span>
                </div>
            </div>
        </div>
        <div id="selectCashierCol" class="col-sm-12 col-lg-5 order-first order-md-last pb-5">
            <div [@fade]="products.length > 0 ? 'active' : 'inactive'">
                <div class="d-flex flex-column">
                    <div class="d-flex justify-content-between">
                        <mat-placeholder class="placeholder mr-3 mb-1">בחר קופה</mat-placeholder>
                        <span class="ml-3" matSuffix matTooltip="שם הקופה" matTooltipPosition="right">
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div id="selectInsuranceCol" class="col-sm-12 col-lg-5" [@fade]="companies.length > 0 ? 'active' : 'inactive'">
            <div class="d-flex justify-content-between">
                <mat-placeholder class="placeholder mr-3 mb-1">בחר חברת ביטוח</mat-placeholder>
                <span class="ml-3" matSuffix matTooltip="שם חברת הביטוח" matTooltipPosition='right'>
                </span>
            </div>
        </div>
        <div id="addImageCol" class="col-sm-12 col-lg-5 text-center align-self-center">
            <div *ngIf="policyForm.get('firstPage.productType').value?.type !== 'executive' &&
                        policyForm.get('firstPage.productType').value?.type !== null ">
                <button mat-button type="button" id="uploadFileButton" class="form-upload-btn">
                    <label>
                        <input type="file" (change)="setFile($event.target)">
                    </label>
                </button>
            </div>
        </div>
  </div>

https://codeply.com/p/n4mw1Vydsy

how to rearrange bootstrap columns in order on mobile view

i have found the answer

Template

<div class="col-lg-4 col-xs-12">1</div>
<div class="col-lg-8 col-xs-12 top-features">2</div>
<div class="col-lg-4 col-xs-12 item-brand">3</div>
<div class="col-lg-8 col-xs-12"><4/div>
<div class="col-lg-4 col-xs-12">5</div>
<div class="col-lg-8 col-xs-12">6</div>

Styles

@media screen and (min-width: 769px) {

  .top-features {
    order: 2;
  }

  .item-brand {
    order: 1;
  }
}

Bootstrap 3 div order change on mobile view

When designing responsive websites, always design mobile-first. which means your HTML code represents the layout on a mobile device.

So keep div[2] first, and div[1] second by default. And then change their behaviour on larger screen sizes.

So, you can modify your code as follows:-

<div class="col-xs-12 col-md-8 col-md-push-4">2</div>
<div class="col-xs-12 col-md-4 col-md-pull-8">1</div>

On mobile, both divs have equal widths, and div[2] will appear before div[1](referring to your diagram). But on desktop and above, div[2] will be pushed to the right, and div[1] will be pulled to the left, resulting in the desired order.

Hope this helps! :-)

---

Related Topics