2列设计与堆叠顺序

I've been trying everything I can think of to get two columns to stack properly and still haven't nailed it. I sure there are multiple ways to do it.

我一直在尝试我能想到的所有东西，以便正确地堆叠两列，但仍然没有钉它。我确定有多种方法可以做到这一点。

I'm trying to get a grid like this and then a mobile friendly stacking order.

我正试图获得这样的网格，然后是一个移动友好的堆叠顺序。

 1      2
 3      4
 5      

So on mobile they are

所以在移动设备上他们是

1
2
3
4
5

My CSS:

我的CSS：

<style>
.flatwrapper {
    width: 780px;
}

.flatcontent {
    display: inline-block;
    width: 320px;
    float: left;
    margin: 0 50px 15px 0;
}

.docpic {
    float: left;
    width: 53px;
    height: 75px;
    z-index: 2;
}

.contact {
    position: relative;
    background-color: #2ECC71;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact:hover {
    background-color: #27AE60;
}

.contact2 {
    position: relative;
    background-color: #E67E22;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact2:hover {
    background-color: #D35400;
}

.contact3 {
    position: relative;
    background-color: #3498DB;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact3:hover {
    background-color: #2980B9;
}

.contact4 {
    position: relative;
    background-color: #95A5A6;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact4:hover {
    background-color: #7F8C8D;
}

.contact5 {
    position: relative;
    background-color: #F1C40F;
    height: 75px;
    width: 265px;
    display: flex;
    margin: 0 0 0 53px;
}

.contact5:hover {
    background-color: #F39C12;
}

.boxtext {
    font-size: 12pt;
    color: white;
    opacity: .9;
    font-weight: 300;
    padding-left: 10px;
    padding-top: 18px;
    ) 
@media screen and (max-width: 710px) {
        .flatwrapper {
            width: 320px;
        }
        .flatcontent {
            margin: 0 0 15px 0;
        }
    }
</style>

My HTML:

我的HTML：

<div class="flatwrapper">
<div class="flatcontent">
    <div class="docpic">
        <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/glanton_75_high.jpg" width="53" />
    </div>
    <a href="tel:[phone]">
    </a>
    <div class="contact">
        <a href="tel:[phone]">
            <p class="boxtext">Dr. Glanton - Pain Management
                <br /> Click to Call [phone]</p>
        </a>
    </div>
</div>
<div class="flatcontent">
    <div class="docpic">
        <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/alvi_75_high.jpg" width="53" />
    </div>
    <a href="tel:[phone]">
    </a>
    <div class="contact2">
        <a href="tel:[phone]">
            <p class="boxtext">Dr. Alvi - Cardiology
                <br /> Click to Call [phone]</p>
        </a>
    </div>
    </div>
</div>
<div class="flatcontent">
<div class="docpic">
    <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/valuck_75_high.jpg" width="53" />
</div>
<a href="tel:[phone]">
</a>
<div class="contact3">
    <a href="tel:[phone]">
        <p class="boxtext">Dr. Valuck - Cardiology
            <br /> Click to Call [phone]</p>
    </a>
    </div>
</div>
<div class="flatcontent">
<div class="docpic">
    <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/greving_75_high.jpg" width="53" />
</div>
<a href="tel:[phone]">
</a>
<div class="contact4">
    <a href="tel:[phone]">
        <p class="boxtext">Dr. Greving - Internal Medicine
            <br /> Click to Call [phone]</p>
    </a>
    </div>
</div>
<div class="flatcontent">
<div class="docpic">
    <img alt="" src="http://www.hannibalregional.com/portals/4/Images/providers/metlis_75_high.jpg" width="53" />
</div>
<a href="tel:[phone]">
</a>
<div class="contact5">
    <a href="tel:[phone]">
        <p class="boxtext">Dr. Metlis - Plastic Surgeon
            <br /> Click to Call [phone]</p>
    </a>
    </div>
</div>
</div>
</div>

2 个解决方案

#1

Alright so Change you media query to this:

好的，所以将媒体查询更改为：

@media screen and (max-width: 710px) {
    .flatwrapper {
        width: 100%;  <-- full width optional I don't know why you wanted it to be 320px
    }
    .flatcontent {
        margin: 0 0 15px 0;
        width:100%;  <-- this needs to be 100% forcing the floated elements to take up all the block space
    }
}

So when you float elements to make columns you can give them 100% width which will push all the rest of the floated columns below the 100% block.

所以当你浮动元素来制作列时，你可以给它们100％的宽度，这将把所有其余的浮动列推到100％块之下。

Oh and in the last css style before your media query you closed it off with a ) change that to }

哦，在您的媒体查询之前的最后一个CSS样式中，您关闭它a）将其更改为}

.boxtext {
font-size: 12pt;
color: white;
opacity: .9;
font-weight: 300;
padding-left: 10px;
padding-top: 18px;
} <-- add this

#2

You're floating the flatcontent class, causing all of them to float rather than separate into columns. You can use a flatwrapper for each column, and when the media query hits the desired breakpoint, change that class's float to 'none' so that it stacks underneath the other flatwrapper div.

你正在浮动flatcontent类，导致它们全部浮动而不是分成列。您可以为每列使用flatwrapper，当媒体查询到达所需的断点时，将该类的float更改为'none'，以便它在另一个flatwrapper div下面堆叠。