如何在小屏幕上为单个 bootstrap 列更改 overflow/wrap 的方向？

Question

我有一个 bootstrap 行，在大屏幕上有两列（Text 2 和 Image 2，如下），它在小屏幕上换行，所以 Text 2 在上面并且 Image 2 位于底部，默认情况下是预期的。在小屏幕上，我希望 Image 2 位于顶部，Text 2 位于底部，但仅针对这一行，而不是我的整个页面。换句话说，我希望单行从右到左而不是从左到右。

Large Screen:
Image 1         Text 1
Text 2          Image 2
Image 3         Text 3 

Small Screen:
Image 1
Text 1
**Text 2
Image 2**
Image 3
Text 3

Desired Small Screen:
Image 1
Text 1
**Image 2
Text 2**
Image 3
Text 3

如何更改 bootstrap 环绕这一行的方向？

Answer 1

Bootstrap 4 带有一个 class 来处理这个 - order-[1-12]

它与其他所有东西都在相同的断点 [sm / md / lg / xl] 上工作，所以你应该熟悉如何设置它 - 但是，要得到你想要的，会像这样

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-4">
  <div class="row">
    <div class="col-sm-12 order-sm-1 col-md-6">
      <div class="card card-body">Image 1</div>
    </div>
    <div class="col-sm-12  order-sm-2 col-md-6">
      <div class="card card-body">Text 1</div>
    </div>

    <div class="col-sm-12 order-sm-4 col-md-6 order-md-3">
      <div class="card card-body">Text 2</div>
    </div>
    <div class="col-sm-12 order-sm-3 col-md-6 order-md-4">
      <div class="card card-body">Image 2</div>
    </div>

    <div class="col-sm-12 order-sm-5 col-md-6">
      <div class="card card-body">Image 3 </div>
    </div>
    <div class="col-sm-12 order-sm-6 col-md-6">
      <div class="card card-body">Text 3</div>
    </div>
  </div>
</div>
<br>
<br>

如何在小屏幕上为单个 bootstrap 列更改 overflow/wrap 的方向？

How can I change the direction of overflow/wrap on small screens for a single bootstrap column?

css

drupal-8

twitter-bootstrap

bootstrap-4