html - 3 列到 2 列。多行

Question

所以我遇到的问题是我有多行，其中有 3 列。然而; 如果我想要更小的内容宽度，我希望它下降到 2 列。如何？

我还必须提到每一列都包含图像背景。我为此看到的每个解决方案都是使第三列项目 100% 宽，但是我不能用图像来做到这一点。甚至仅使用 CSS 和 HTML 是否可行。

有任何想法吗？

提前致谢。

编辑

 <div class="media-row clearfix first">
        <div class="g6 first">
            Column 1
        </div>
        <div class="g6">
            Column 2
        </div>
        <div class="g6 last">
            Column 3
        </div>
    </div>

<div class="media-row clearfix last">
    <div class="g6 first">
        Column 1
    </div>
    <div class="g6">
        Column 2
    </div>
    <div class="g6 last">
        Column 3
    </div>
</div>

.media-row { margin-bottom: 20px; }
div.g6 { float: left; margin-left: 1.76%; min-height: 20px; overflow: hidden; }
div.g6:first-child { margin-left: 0 }
div.g6 { width: 27.91%; } 

Answer 1

解决方案是使用@media 查询

检查这个小提琴

你应该找到你的 html 的断点并制定这样的规则

@media only screen and (max-width: 769px) {
    div.g6{
        width: 49%;
        margin-left: 1%;
    }     
}