Html 3列到2列。多行

所以我遇到的问题是，我有多行，其中有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%; } 

第1栏
第2栏
第3栏
第1栏
第2栏
第3栏
.media行{页边距底部：20px；}
div.g6{浮点：左；左边距：1.76%；最小高度：20px；溢出：隐藏；}
div.g6:第一个子项{左边距：0}
div.g6{宽度：27.91%；}

解决方案使用@media querys

检查这个

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

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

---

那应该是自动发生的。。检查此项。使用我使用的代码编辑。不要像上面代码中显示的那样使用。。