html - 旋转一个 div 以使其响应

Question

我的页面中间有一个包含菜单的 div。我的问题是让它响应。我的想法是水平旋转它，但按钮仍然可以工作。所以通过这种方式它会响应。

这是我的CSS代码:

 .content .middle-content{
        text-align: center;
    }
    .content .middle-content .prev{
        margin-bottom: 50px;
        margin-top: 5px;
    }
    .content .middle-content .icon{
        margin-bottom: 15px;
        margin-top: 15px;
    }
    .content .middle-content .next{
        margin-bottom: 15px;
        margin-top: 50px;
    }

和我的 html 代码:

<div class="col-md-2">
        <div class="middle-content"> 
            <hr class="vertical-line-top">
            <div class="prev">
                <a style="cursor:pointer;" id="prev">
                <img src="img/icon-01.png"   >
                </a>
            </div>
            <div class="icon gif">
                <a href="#"  id="info1">
                <img src="img/icon-02.png" >
                </a>
            </div>
            <div class="icon">
                <a href="#" id="info2">
                <img src="img/icon-03.png">
                </a>
            </div>
            <div class="icon">
                <a href="#" id="info3">
                <img src="img/icon-04.png">
                </a>
            </div>
            <div class="icon">
                <a href="#" id="info4">
                <img src="img/icon-05.png">
                </a>
            </div>
            <div class="icon">
                <a href="#" id="info5">
                <img src="img/icon-06.png">
                </a>
            </div>
            <div class="icon">
                <a href="#" id="info6">
                <img src="img/icon-07.png">
                </a>
            </div>
            <div class="icon">
                <a href="#" id="info7">
                <img src="img/icon-08.png">
                </a>
            </div>            
            <div class="icon">
                <a href="#" id="info8">
                <img src="img/icon-09.png">
                </a>
            </div>
            <div class="next" >
                <a style="cursor:pointer;" id="next">
                <img src="img/icon-10.png">
                </a>
            </div>
            <hr class="vertical-line-bottom">
        </div>
    </div>

我附加了一个 jsfiddle 只是为了说明它的总体外观，它们是左边的三个 div，包含图片和一些文本，中间的 div 和右边的。

任何人都可以帮助我让它响应，我试过了但没有机会？ DEMO

Answer 1

我们需要看到更多代码才能在您的站点中重现它，但是根据您提供的代码，您可以设置媒体查询，然后将元素 float 到左侧:

    @media (max-width: 400px){
.icon, .next, .prev{float: left;}       

    }

参见 fiddle :https://jsfiddle.net/ff0k9j45/2/