Twitter Bootstrap Question posted in

Twitter bootstrap – Twitter-bootstrap div grid arrangement based on specific requirement

I’ve this twitter-bootstrap grid structure.

<div class="row">
    <div class="col-lg-8">A</div><div class="col-lg-4">B</div>
</div>
<div class="row">
    <div class="col-lg-4">C</div><div class="col-lg-8">D</div>
</div>

If I reduce the screen size, the output will be:

A
B
C
D

My question is, is it possible to let the output become

A
B
D
C

in smaller size and become

A  B
C  D

in desktop screen size?

Tags:

3

Answers


  1. 0

    I have used flexible box solution for the output. Reordered the divs C and D based on the screen size < 768px. Check the browser compatibility table here: Can I use Flexbox

    @media (max-width: 768px) {
  .reorder {
    display: flex;
    flex-direction: column;
  }
  .second {
    order: 1;
  }
  .first {
    order: 2;
  }
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-8">A</div>
    <div class="col-lg-4">B</div>
  </div>
  <div class="row reorder">
    <div class="col-lg-4 first">C</div>
    <div class="col-lg-8 second">D</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    I am not sure why you want in smaller displays have the output as 

    A B
C D

    because as smaller display you have, as more narrow your width becomes, meaning for best performance, you should place elements rather in the column. Here is jsfiddle

    Login or Signup to reply.
  3. 0

    col-lg-* is for large screens
    col-md-* is for medium screens
    col-sm-* is for small screens
    col-xs-* is for extra small screens

    define others to achieve what you are expecting and wrap all col-* in one row class.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search