GridboxCSS:XS左侧的响应/浮动主要部分

我用codepen做了一个例子： 链接：

如何让B部分在XS/手机上向左浮动（A、C、D部分将隐藏）。将所有部分设置为“stack float left”也可以

问题似乎是A、C和D部分仍然“存在”，但隐藏起来，导致B部分“向右浮动”

定义

网格间距：为内容间距提供了一种简单的方法

网格：生成块级网格

内联网格：生成内联级别的网格

子网格：表示希望其行/列的大小取自其父级，而不是指定其自己的大小。
结论

Flexbox和Gridbox可以一起使用（与bootrap一起使用）

Flexbox最适用于单行，而Grixbox最适用于“二维”

如果屏幕宽度小于px尺寸，非柔性测量（如px）会使方框不出现在屏幕上


来源

什么是flexbox

Flexbox用于一维布局（行或列）。

“Flexbox是一个单一维度–行或列。”-Rachel Andrews

警告：Flexbox与某些IE版本不兼容。
什么是网格盒

网格设计用于flexbox，而不是代替它。CSS网格用于二维布局
“网格用于在两个维度上布局项目–行和列”-Rachel Andrews。

如果你-1请解释为什么更好地张贴在未来，因为我是新的形式

---

谢谢

您可以使用flex来实现这一点。检查下面的代码

.container{
显示器：flex；
弯曲方向：立柱；
}
.左{
顺序：2；
}
.对{
顺序：1；
}
.container>div{
弹性：1；
}
.集装箱img{
宽度：100%；
显示：块
}
.内底{
显示器：flex；
弯曲方向：柱
}
@介质（最小宽度：768px）{
.集装箱{
弯曲方向：行；
}
.内底{
弯曲方向：行
}
.左{
顺序：1；
}
.对{
顺序：2；
}
}

---

您可以使用flex实现这一点。检查下面的代码

.container{
显示器：flex；
弯曲方向：立柱；
}
.左{
顺序：2；
}
.对{
顺序：1；
}
.container>div{
弹性：1；
}
.集装箱img{
宽度：100%；
显示：块
}
.内底{
显示器：flex；
弯曲方向：柱
}
@介质（最小宽度：768px）{
.集装箱{
弯曲方向：行；
}
.内底{
弯曲方向：行
}
.左{
顺序：1；
}
.对{
顺序：2；
}
}

这太完美了。甚至比预期的还要好，因为它将它们堆叠起来。把它标为答案。谢谢这太完美了。甚至比预期的还要好，因为它将它们堆叠起来。把它标为答案。谢谢

<div class="container-fluid wrapper">
<div class="box a hidden-sm hidden-xs"> <b><u>Definitions <br></b></u>
Grid-gap: provides an easy way for spacing our content <br>
Grid: generates a block-level grid <br>
  Inline-grid: generates an inline-level grid<br>
  Subgrid: Indicate that you want the sizes of its rows/columns to be taken from its parent rather than specifying its own.
  </div>

  <div class="box b">
    <b><u>Conclusion <br></b></u>
    Flexbox and Gridbox can be used together (with bootrap). <br>
    Flexbox is best for single rows while Grixbox is best for "2 dimensions" <br>
    Non-flexible measurements such as px can make boxes not appear on screen if the screen width is less than the px size. <br>

    <br><b>Sources</b><br><a href="https://css-tricks.com/snippets/css/complete-guide-grid/">https://css-tricks.com/snippets/css/complete-guide-grid/<br></a>
    <a href="https://gridbyexample.com/examples/">https://gridbyexample.com/examples/<br></a>
    <a href="https://css-tricks.com/things-ive-learned-css-grid-layout/">https://css-tricks.com/things-ive-learned-css-grid-layout/<br></a>
     <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">https://css-tricks.com/snippets/css/complete-guide-grid/<br></a>
    <a href="https://www.w3schools.com/css/css_rwd_grid.asp">https://www.w3schools.com/css/css_rwd_grid.asp<br></a>
   </div>

  <div class="box c hidden-sm hidden-xs"><b><u>What is flexbox? </b></u><br> 
Flexbox is for one dimensional layout (row or column). 
<br>"Flexbox is a single dimension – in a row OR a column." -Rachel Andrews <br>
       Warning: Flexbox is NOT compatible with some IE verisions.
  </div>

  <div class="box d hidden-sm hidden-xs">
    <b><u>What is gridbox? <br></b></u>
      Grid is designed to be used with flexbox, not instead of it.  CSS grid is for two dimensional layout. <br>"Grid is for layout of items in two dimensions – rows AND columns" - Rachel Andrews.
  </div>
</div>