为了能够实现这一目标，而无需使用脚本，所有项目（h2，p，p，ul）需要 看 对方，这在技术上意味着他们需要的兄弟姐妹。

然后，对于宽屏并排放置的屏幕，需要对其进行重新排序，以h2第一个（order: 0）开头，依此类推。

我使用了一个媒体查询，但是您可能想添加更多内容，以匹配Boostrap的更多断点。

要添加外边界，您需要 在元素上使用border-top/ border-left/ border-right/ 的组合（border- bottom还需要随查询的改变），以覆盖水平和垂直堆叠的项目。

@media (min-width: 768px) {



  .content {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-around;

  }



  .content > * {

    flex-basis: calc(50% - 30px);

  }



  .content h2 {                     /*  1st row  */

    order: 0;

  }

  .content p {                      /*  2nd row  */

    order: 1;

  }

  .content p + p {                  /*  3rd row  */

    order: 2;

    flex-basis: calc(100% - 30px);  /* as only 1 `p` in markup, it need 100% width,

                                       or add an extra empty in the markup  */

  }

  .content ul {                     /*  4th row  */

    order: 3;

  }



}


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="light-grey-section ruler">

  <div class="container">

    <div class="row">

      <div class="light-section col-xs-12">



        <div class="content">

          <h2>Lorem ipsum Lorem ipsum</h2>

          <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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

          </p>

          <p>

            Lorem ipsum dolor

          </p>

          <ul class="check">

            <li>Lorem ipsum dolor sit amet,</li>

            <li>Lorem ipsum dolor sit amet,</li>

            <li>Lorem ipsum dolor sit amet,</li>

            <li>Lorem ipsum dolor sit amet,</li>

            <li>Lorem ipsum dolor sit amet,</li>

          </ul>

          <h2>Lorem ipsum</h2>

          <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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata

            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

          </p>

          <ul class="check">

            <li>Lorem ipsum dolor sit amet,</li>

            <li>Lorem ipsum dolor sit amet,</li>

            <li>Lorem ipsum dolor sit amet,</li>

            <li>Lorem ipsum dolor sit amet,</li>

          </ul>

        </div>



      </div>

    </div>

  </div>

</div>

如果一个项目有很多，则可以将它们分组，即每组4个，以使CSS小得多。

Codepen样本

.container {

  display: flex;

  flex-direction: column;

  justify-content: space-around;

}



.container .row {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

}



.container .row>* {

  flex-basis: calc(100% - 30px);

  min-width: 0;

}



.container .row>div {

  border: 2px solid gray;

}



.container .row>div:nth-child(8n+1),

.container .row>div:nth-child(8n+2),

.container .row>div:nth-child(8n+3),

.container .row>div:nth-child(8n+4) {

  background: lightgray;

}



.container .row>div:nth-child(4n+1) {

  border-width: 2px 2px 0 2px;

  margin-top: 10px;

}



.container .row>div:nth-child(4n+2) {

  border-width: 0 2px;

}



.container .row>div:nth-child(4n+2)+div {

  border-width: 0 2px;

}



.container .row>div:nth-child(4n+4) {

  border-width: 0 2px 2px 2px;

}



@media (min-width: 600px) {

  .container .row>* {

    flex-basis: calc(50% - 30px);

  }

  .container .row>div:nth-child(4n+1) {

    order: 0;

  }

  .container .row>div:nth-child(4n+2) {

    order: 1;

  }

  .container .row>div:nth-child(4n+2)+div {

    order: 2;

  }

  .container .row>div:nth-child(4n+4) {

    order: 3;

  }

  .container .row>div:nth-child(4n+9) {

    order: 4;

  }

  .container .row>div:nth-child(4n+10) {

    order: 5;

  }

  .container .row>div:nth-child(4n+10)+div {

    order: 6;

  }

  .container .row>div:nth-child(4n+12) {

    order: 7;

  }

}


<div class="container">

  <div class="row">

      <div><h2>Title 1</h2></div>

      <div><p>Test text 1</p></div>

      <div><p>Test text 2</p></div>

      <div><button>Button</button></div>



      <div><h2>Title 2</h2></div>

      <div><p>Test text 1 is a bit longer to force it to wrap</p></div>

      <div><p>Test text 2</p></div>

      <div><button>Button</button></div>



      <div><h2>Title 3 is a bit longer to make it wrap</h2></div>

      <div><p>Test text 1 is a bit longer to force it to wrap</p></div>

      <div><p>Test text 2</p></div>

      <div><button>Button</button></div>



      <div><h2>Title 4</h2></div>

      <div><p>Test text 1</p></div>

      <div><p>Test text 2 is a bit longer to force it to wrap</p></div>

      <div><button>Button</button></div>

  </div>



  <div class="row">

      <div><h2>Title 5</h2></div>

      <div><p>Test text 1</p></div>

      <div><p>Test text 2</p></div>

      <div><button>Button</button></div>



      <div><h2>Title 6</h2></div>

      <div><p>Test text 1 is a bit longer to force it to wrap</p></div>

      <div><p>Test text 2</p></div>

      <div><button>Button</button></div>



      <div><h2>Title 7 is a bit longer to make it wrap</h2></div>

      <div><p>Test text 1 is a bit longer to force it to wrap</p></div>

      <div><p>Test text 2</p></div>

      <div><button>Button</button></div>



      <div><h2>Title 8</h2></div>

      <div><p>Test text 1</p></div>

      <div><p>Test text 2 is a bit longer to force it to wrap</p></div>

      <div><button>Button</button></div>

  </div>

</div>