Twitter Bootstrap Question posted in

How do I change bootstrap 3 version column order in mobile view-Twitter bootstrap

I have tried to change the column order in desktop view and mobile view. In mobile view, Last Name should be in 2nd place where in desktop, it should be in last.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="container active col-md-3 col-sm-6 ">
    <div class="panel panel-default">
      <div class="panel-heading">First Name</div>
    </div>
  </div>

  <div class="container active col-md-3 col-sm-6 col-md-push-6">
    <div class="panel panel-default">
      <div class="panel-heading">Last Name</div>
    </div>
  </div>

  <div class="container active col-md-3 col-sm-6 col-md-pull-3">
    <div class="panel panel-default">
      <div class="panel-heading">Address</div>
    </div>
  </div>

  <div class="container active col-md-3 col-sm-6 col-md-pull-3 ">
    <div class="panel panel-default">
      <div class="panel-heading">Company</div>
    </div>
  </div>

</div>
Tags:

2

Answers


  1. 0

    Using Flex and adding Media-Query will solve your problem very easily.

    There will be a way to get it done using Bootstrap Grid, i.e using col-md-push-4 and etc.

    But it’s very much convenient using flex and adding order to inner elements.

    Very useful Flexbox documentation.

    .outer {
  margin: 20px 20px;
  display: flex;
  flex-wrap: wrap;
}


/*For Mobile*/

@media (min-width: 400px) {
  .inner {
    width: 100%;
    padding: 0px 20px;
  }
  .fn {
    order: 1;
  }
  .ln {
    order: 2;
  }
  .add {
    order: 3;
  }
  .co {
    order: 4;
  }
}


/*For Desktop which we are working for*/

@media (min-width: 992px) {
  .inner {
    width: 50%;
    padding: 0px 20px;
  }
  .fn {
    order: 1;
  }
  .ln {
    order: 3;
  }
  .add {
    order: 2;
  }
  .co {
    order: 4;
  }
}


/*For Large Screen*/

@media (min-width: 1200px) {
  .inner {
    width: 25%;
    padding: 0px 20px;
  }
  .fn {
    order: 1;
  }
  .ln {
    order: 4;
  }
  .add {
    order: 2;
  }
  .co {
    order: 3;
  }
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="outer">
  <div class="inner fn">
    <div class="panel panel-default">
      <div class="panel-heading" style="background:red; color:white;">First Name</div>
    </div>
  </div>


  <div class="inner ln">
    <div class="panel panel-default">
      <div class="panel-heading" style="background:green; color:white;">Last Name</div>
    </div>
  </div>
  <div class="inner add">
    <div class="panel panel-default">
      <div class="panel-heading" style="background:blue; color:white;">Address</div>
    </div>
  </div>

  <div class="inner co">
    <div class="panel panel-default">
      <div class="panel-heading" style="background:orange; color:white;">Company</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    I see that you are using push & pull which will only work for the desktop/tablet viewports.

    Best is to develop for the mobile as per your need and then use push & pull for the desktop/tablet to make the re-arrangement.

    I have achieved similar ordering using the same approach. It works very well.

    Update:

    Adding the plunker for the same : http://plnkr.co/edit/b2PNXyyXOsXUx51LweJI?p=preview

    HTML

    <!DOCTYPE html>
<html>

  <head>
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-3 col-sm-push-3 cell cell-1">
            1
        </div>
        <div class="col-xs-12 col-sm-3 col-sm-pull-3 cell cell-2">
            2
        </div>
        <div class="col-xs-12 col-sm-3 cell cell-3">
            3
        </div>
        <div class="col-xs-12 col-sm-3 cell cell-4">
            4
        </div>
      </div>
    </div>
  </body>

</html>

    CSS

    .cell {
  background: #eee;
  margin: 1px;
  padding: 20px 0;
  text-align: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search