Bootstrap响应式布局在md上有一列偏移

Question

使用bootstrap 4可以做这样的事情吗？

• 在大屏幕上，3列相同尺寸：
  111 222 333
  
• 在中型屏幕上，2列相同尺寸，333下222：
  111 222
  333个
  
• 在小屏幕上，
  111个
  222个
  333个
  

这是我到目前为止所尝试的：

<div class="row">
    <div class="col-lg-4 col-md-6" style="background-color: red">111</div>
    <div class="col-lg-8 col-md-6">
        <div class="row">
            <div class="col-md-6" style="background-color: blue">222</div>
            <div class="col-md-6" style="background-color: yellow">333</div>
        </div>
    </div>
</div>

Answer 1

只需在offset-列上使用333，就像这样......

https://www.codeply.com/go/3R1l8JIWOt

<div class="row">
    <div class="col-md-6 col-lg-4" style="background-color: red">111</div>
    <div class="col-md-6 col-lg-4" style="background-color: blue">222</div>
    <div class="col-md-6 offset-md-6 col-lg-4 offset-lg-0" style="background-color: yellow">333</div>
</div>

这是相应的，因此用于将333列向右推的偏移量仅适用于md屏幕宽度。