Twitter bootstrap reorder elements on small devices

Bizboss
February 15, 2016
126 views
2 votes
3 Answers

I have the following layout on a page:

On the left I have the desktop (lg) version, And on the right the reordering that I want to have on the small devices.

With this code:

        <div class="row">
            <div class="col-sm-6 col-sm-push-6">
                <div class="alert alert-danger"><h1>Lorem Ipsum (2)</h1>
                    <br>
                    Rostfreie Bohrbefestiger für Stahl- und Aluminiumunterkonstruktionen </div>
            </div>
            <div class="col-sm-6 col-sm-pull-6">
                <div class="alert alert-info">Image (1)

                    <p></p>

                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
                    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>

                    <p></p>

                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
                    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>

                </div>
            </div>

        </div>

        <div class="row">

            <div class="col-md-6 col-md-offset-6 col-sm-6 col-sm-offset-6 col-lg-offset-6">
                <div class="alert alert-info">Description (3)</div>
            </div>

        </div>

I get a Problem with the desktop view:
see printscreen:

Any proposals to fix that problem and to show the description element (3) direct under element “2” are welcome.

Thanks a lot.

Answers

Try adding col-xs-12 in your divs. Your div will take all the width on small devices:

<div class="row">
    <div class="col-sm-6 col-sm-push-6 col-xs-12">
        <div class="alert alert-danger"><h1>Lorem Ipsum (2)</h1>
            <br>
            Rostfreie Bohrbefestiger für Stahl- und Aluminiumunterkonstruktionen </div>
    </div>
    <div class="col-sm-6 col-sm-pull-6 col-xs-12">
        <div class="alert alert-info">Image (1)

            <p></p>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>

            <p></p>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>

        </div>
    </div>

</div>

<div class="row">

    <div class="col-md-6 col-md-offset-6 col-sm-6 col-sm-offset-6 col-lg-offset-6 col-xs-12">
        <div class="alert alert-info">Description (3)</div>
    </div>

</div>

Try the following:

<div class="row">
    <div class="col-sm-12 col-lg-6 pull-right">
        <div class="alert alert-danger"><h1>Lorem Ipsum (2)</h1>
            <br>
            Rostfreie Bohrbefestiger für Stahl- und Aluminiumunterkonstruktionen </div>
    </div>
    <div class="col-sm-12 col-lg-6 pull-left">
        <div class="alert alert-info">Image (1)

            <p></p>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>

            <p></p>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>

        </div>
    </div>

    <div class="col-sm-12 col-lg-6 pull-right">
        <div class="alert alert-info">Description (3)</div>
    </div>

</div>

This is one solution with Flexbox and JQuery Fiddle

$(window).on("resize", function () {
   if($(window).width() < 768) {
     $('.right').replaceWith(function() {
       return $('.box', this);
      });
   } else {
     if($('.right').length === 0){
      	$('.box-2, .box-3').wrapAll('<div class="right">');
      }
   }
}).resize();

.content {
  height: 100vh;
  display: flex;
}

.box {
  flex: 1;
  background: #36434B;
  margin: 10px;
  color: white;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right {
  flex-direction: column;
  display: flex;
  flex: 1;
}

.right .box:last-child {
  flex: 2;
}

@media(max-width: 768px) {
  .content {
    flex-direction: column;
  }
  
  .box-1 {
    order: 2;
    flex: 3;
  }
  
  .box-2 {
    order: 1;
    flex: 1;
  }
  
  .box-3 {
    order: 3;
    flex: 2;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="box box-1">1</div>
  <div class="right">
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.