按左/右对齐的顺序对齐引导列

Question

我不知道如何开始这个问题，我想用引导程序制作这个网格但我不能做以下事情：

Dekstop模式

+-----------------+------------------------------+
|    content1     |                              |
|                 |           content2           |
+-----------------+                              |
|                 |                              |
|    content3     +------------------------------+
|                 |
+-----------------+

移动模式

+------------------------------------------------+
|                  content1                      |
+------------------------------------------------+
|                  content2                      |
+------------------------------------------------+
|                  content3                      |
+------------------------------------------------+

有人知道要制作的代码吗？

Answer 1

中间div需要正确浮动。 pull-right类可以做到这一点。但是，在较小的屏幕上，浮子会干扰较小屏幕上的非浮动元件。因此，col-xs-12类是必需的。

＆＃13;

＆＃13;

@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css");

＆＃13;

<div class="container">
  <div class="row">
    <h1>Three columns with a right float</h1>
    <div class="col-xs-12 col-md-4 bg-primary">
      <h2>Content 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed dignissim neque.</p>
    </div>
    <div class="col-xs-12 col-md-8 pull-right bg-success">
      <h2>Content 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed dignissim neque. Donec fringilla enim sit amet felis aliquam, at varius nisi viverra. Proin ante diam, fermentum non elit vitae, pulvinar tristique dui. Fusce malesuada libero
        sit amet est molestie, sit amet pharetra nisi mattis.</p>
    </div>
    <div class="col-xs-12 col-md-4 bg-info">
      <h2>Content 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed dignissim neque.</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;