通过CSS

Question

现在，我的应用程序通过更大的屏幕看起来几乎是我想要的。 https://imgur.com/a/MCe5D - 当您缩小屏幕尺寸时，两列（趋势向上和趋势向下）将越来越近，直到它们刚好接触，这很好。但是在那种情况下，当他们不再接近时，我想让Trending Down和它的内容移动到Trending Up列下面，以便更加适合移动设备。 Here's a pen showing the area that is being affected.

//The whole area surrounding the two columns
.playersColumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding-left: 150px;
padding-right: 150px;
padding-top: 25px;
overflow-y: scroll;
}

//The two columns of player info
.playersBody {
overflow: auto;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
min-width: 255px;
}

那支笔不是很有用，但它显示了我的确切代码以及哪些标签在哪里。我尝试将第二列播放器信息和趋势标题放在第一列中，但这只是一个大列（这是我想要的，但只有当屏幕缩小时）

感谢任何帮助 - 如果有更好的方式来显示代码或布局，请告诉我。

Answer 1

我建议查看媒体查询。 Here是一段简短的视频，向您展示基础知识。

您可以设置一个阈值，在这些条件下触发不同的样式。当您希望UI执行不同大小的不同操作时，它非常有用。

@media only screen 
and (*Your threshold criteria goes here* EXAMPLE:  max-width : 1000px) {   
  //css goes here with whatever css you want to fire at this threshold
}