html - 三列响应式

Question

我不能使用 bootstrap 来完成这个任务。我使用带有 radium 的 reactjs(类似 react-native 的样式)，我尝试使用 flexbox，但我能够使用 CSS 和媒体查询。

我有一个 3 列布局。从桌面访问它时，它显示如下:

--------------------------
|  column 1 |            |
------------|  column 2  |
|  column 3 |            |
--------------------------

第 1 列和第 3 列的高度将与第 2 列相同。

我希望从手机/平板电脑/调整大小浏览器查看它时是这样的:

-------------
|  column 1 |
-------------
|  column 2 |
-------------
|  column 3 |
-------------

第 2 列需要在第 1 列和第 3 列之间移动，在此配置中每列的高度无关紧要。

我在下面的示例中使用了 radium，但我可以使用 CSS 和媒体查询。

columnsContainer: {
    display: "flex",
    flexDirection: "row",
    @media (min-width:"xxx"px): {
        flexDirection: "column"
    }
},
rightColumn: {
    width: "392px",
    @media (min-width:"xxx"px): {
        marginTop: "32px",
        width: "100%"
    }
},
leftColumn: {
    flex: "1",
    @media (min-width:"xxx"px): {
        marginRight: "0px",
        marginLeft: "0px"
    }
},
bottomColumn: {
    flex: "1",
    @media (min-width:"xxx"px): {
        marginRight: "0px",
        marginLeft: "0px"
    },
}

在我的 html 下方:

<div style={styles.columnsContainer}>
    <div style={styles.leftColumn}>
        Column 1
    </div>
    <div style={styles.rightColumn}>
        Column 2
    </div>
    <div style={styles.bottomColumn}>
        Column 3
    </div>
</div>

Answer 1

由于您能够使用 Flexbox，这里有一个您可以尝试的示例。

使用 order 根据要求放置列。

.outer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.one {
  background: red;
  height: 200px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}

.two {
  background: blue;
  height: 200px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}

.three {
  background: green;
  height: 200px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}

@media only screen and (max-width: 600px) {
  .outer {
    max-height: 400px;
  }
  .one {
    width: 50%;
    order: 1;
  }
  .two {
    width: 50%;
    order: 3;
    height: 400px;
  }
  .three {
    width: 50%;
    order: 2;
  }
}

<div class="outer">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
</div>