小型設備上的Twitter引導重新排序元素

Question

我在頁面上有以下布局：
左側是台式機（lg）版本，右側是我希望在小型設備上進行的重新排序。

使用此代碼：

  <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> 

我在桌面視圖上遇到問題：請參見printscreen：

歡迎提出任何解決該問題並在元素“ 2”下直接顯示描述元素（3）的建議。

非常感謝。

Answer 1

請嘗試以下操作：

<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>

Answer 2

嘗試在您的div中添加col-xs-12 。 您的div將在小型設備上占用所有寬度：

<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>

Answer 3

這是Flexbox和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>