Issue in re-arranging div's in xs devices

Question

Fig A shows my design for sm,md and lg devices. In case of xs devices the block B should display above block A (as shown in fig B). But i do not know what is wrong with codes.Someone please help me.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2 col-xs-push-12">A</div>
      <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 col-xs-pull-12">B</div>
    <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">C</div>
  </div>
</div>
</body>
</html>

what do you want in case of xs? do you want fig B? or is figB your problem? — QGA, Sep 23 '15 at 10:41

score 5 · Accepted Answer · edited May 23 '17 at 12:02

This is my first exposure to Bootstrap, but after a bit of research I found the page Bootstrap 3: Push/pull columns only on smaller screen sizes (https://stackoverflow.com/questions/21933664/bootstrap-3-push-pull-columns-only-on-smaller-screen-sizes) to be quite useful in regards your problem.

I suggest you replace the lines for A, B and C with...

      <div class="col-xs-12 col-sm-6 col-sm-push-3" style="background-color:lightcyan;">B</div>
      <div class="col-xs-12 col-sm-3 col-sm-pull-6" style="background-color:red;">A</div>
      <div class="col-xs-12 col-sm-3" style="background-color:yellow;">C</div>

I tested this code using the Try-It-Yourself editors found via http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp and produced the desired results.

Note : Bootstrap gives preference to smaller screen sizes over larger. As such you should layout your code to suit xs-devices, and add code for larger screen sizes to override the code for smaller screen sizes where appropriate.

For example, in my above I only needed to add code for the sm-devices since the changeover occurs when we use a sm or larger device.

I apologise if I sound too wordy. Please feel free to ask any follow-up questions.

Issue in re-arranging div's in xs devices

1 Answers1