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>

我的桌面视图出现问题： 看printcreen：

欢迎修改该问题并在元素“2”下直接显示description元素（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>