html - 如何更改媒体查询中 flex-box 元素的对齐方式？

Question

我正在做一个元素，我正在使用 bootstrap flex-box。我已将链接附加到我正在使用的布局。在除 pc 之外的不同设备上使用时，我需要将右侧的列更改为向下。

这就是我想要得到的

<div class="d-flex flex-row">
    <div class="flex-column"></div>
    <div class="flex-column"></div>
</div>

Answer 1

我想你的意思是......最右边的列以小于 lg 的尺寸到达底部......你可以通过相关类更改较小屏幕上的行为;

更新:添加了与 flex 相同效果的代码

检查下面的代码片段:

.leftSection div {
  border: 2px solid red;
  height: 150px;
  background: #000;
  margin-top: 5px;
}

.leftSection div:nth-child(1) {
  height: 300px
}

.rightSection div {
  border: 2px dotted pink;
  height: 100px;
  background: gray;
  margin-top: 5px;
}

.flexDirection>div {
  min-height: 100px;
  min-width: 100px;
  display: flex;
  flex-direction: column;
}

.flexDirection {
  display: flex;
  flex-direction: row;
}

@media screen and (max-width:992px) {
  .flexDirection {
    flex-direction: column;
  }
}

.flexDirection>div:nth-of-type(1) {
  flex-grow: 2;
}

.flexDirection>div:nth-of-type(2) {
  flex-grow: 1;
}

.flexDirection div {
  margin-top: 5px;
}

.leftSectionFlex>div:nth-child(1) {
  border: 2px solid red;
  height: 300px;
  width: 100%;
  background: #000;
  margin-top: 5px;
}

.leftSectionFlexBottom {
  display: flex;
  flex-direction: row!important;
}

.leftSectionFlexBottom>div {
  border: 1px solid red;
  height: 150px;
  width: 100%;
  background: #000;
}

.rightSectionFlex>div {
  border: 2px dotted pink;
  height: 100px;
  width: 100%;
  background: gray;
  margin-top: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<h2>Flex</h2>

<div class="d-flex flexDirection">
  <div class=" flex-column">
    <div class="leftSectionFlex flex-row">
      <div class=""></div>
      <div class="leftSectionFlexBottom">
        <div class=""></div>
        <div class=""></div>
        <div class=""></div>
      </div>
    </div>
  </div>
  <div class=" rightSectionFlex flex-column">
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
  </div>
</div>

<hr/>
<!--
        -->
<h2> Bootstrap grid</h2>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8">
      <div class="row leftSection">
        <div class="col-md-12"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="row rightSection">
        <div class="col-lg-12 col-md-12"></div>
        <div class="col-lg-12 col-md-12"></div>
        <div class="col-lg-12 col-md-12"></div>
      </div>
    </div>

  </div>
</div>