不同的div定位在不同的屏幕尺寸上

Question

所以我想让我的网站响应较低的分辨率，如平板电脑或手机。我曾经为css使用medai查询而且我管理了所有内容，但我想改变html的结构。

我是如何做到这一点的，因为我使用php生成如下的html。

<div class="destinationWeddingOdd">
            <div class="destinationWeddingOddImage">
                <img src="images/upload/destinationWeddings/296182244" alt="" />            </div>
            <div class="destinationWeddingOddDescription">
                <p>testasdasd</p>
            </div>
            <div class="clearBoth"></div>
        </div>
            <div class="destinationWeddingEven">
            <div class="destinationWeddingEvenDescription">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </div>
            <div class="destinationWeddingEvenImage">
                <img src="images/upload/destinationWeddings/991173874" alt="" />            </div>
            <div class="clearBoth"></div>
        </div>
            <div class="destinationWeddingOdd">
            <div class="destinationWeddingOddImage">
                <img src="images/upload/destinationWeddings/720050007" alt="" />            </div>
            <div class="destinationWeddingOddDescription">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </div>
            <div class="clearBoth"></div>
        </div>
            <div class="destinationWeddingEven">
            <div class="destinationWeddingEvenDescription">
                <p>asdasd</p>
            </div>
            <div class="destinationWeddingEvenImage">
                <img src="images/upload/destinationWeddings/389346779" alt="" />            </div>
            <div class="clearBoth"></div>
        </div>
            <div class="destinationWeddingOdd">
            <div class="destinationWeddingOddImage">
                <img src="images/upload/destinationWeddings/863088179" alt="" />            </div>
            <div class="destinationWeddingOddDescription">
                <p>asdasd</p>
            </div>
            <div class="clearBoth"></div>
        </div>

我希望它首先是类似于图像的东西，然后在它小于100px之后一直是描述，是否可以这样做？谢谢。