在大屏幕上水平折叠手风琴，在小屏幕上垂直折叠手风琴

Question

在这个答案上是一个很好的水平折叠解决方案：Bootstrap 3.0 Collapse Horizontally

但是我正在处理的布局在其左侧的 div 下方有一个手风琴式幻灯片，用于响应式视图，然后在视觉上看起来很糟糕。是否可以让手风琴改变方向并在 SM 和 XS 尺码中向下滑动。

我在这个小提琴上稍微修改了代码：http://jsfiddle.net/kylebellamy/q9GLR/176/

但我看到的另一个问题是文本也在手风琴内旋转。我尝试为“p”标签创建第二组规则，但这似乎不起作用。

这是所需的代码：

HTML：

<div class="container">
    <div class="row">
        <div class="content">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                          Accordion 1
                        </a>
                      </h4>

                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p><h1>Title</h1><br>A paragraph of text about something pertinant to the site which people could read should the feel the need to read about it. They could skip it as well but this keeps the initial view a good deal less text heavy, see?<br>- Some Source</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

CSS：

html, body {
    background-color:#e9eaed;
}
.content {
    width:960px;
    height:0px;
    margin-right: auto;
    margin-left: auto;
}
.panel-group {
    width:430px;
    z-index: 100;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(-100%) rotate(-90deg);
    -webkit-transform-origin: right top;
    -moz-transform: translateX(-100%) rotate(-90deg);
    -moz-transform-origin: right top;
    -o-transform: translateX(-100%) rotate(-90deg);
    -o-transform-origin: right top;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top;
}
.panel-heading {
    width: 430px;
}
.panel-title {
    height:18px
}
.panel-title a {
    float:right;
    text-decoration:none;
    padding: 10px 430px;
    margin: -10px -430px;
}
.panel-body {
    height:830px;
}
.panel-group img {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0%) rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: translateX(0%) rotate(90deg);
    -moz-transform-origin: left top;
    -o-transform: translateX(0%) rotate(90deg);
    -o-transform-origin: left top;
    transform: translateX(0%) rotate(90deg);
    transform-origin: left top;
}
p {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0%) rotate(0deg);
    -webkit-transform-origin: left top;
    -moz-transform: translateX(0%) rotate(0deg);
    -moz-transform-origin: left top;
    -o-transform: translateX(0%) rotate(0deg);
    -o-transform-origin: left top;
    transform: translateX(0%) rotate(0deg);
    transform-origin: left top;
}
.panel-group .panel img {
    margin-left:400px;
    position: absolute;
}

Answer 1

如果屏幕小于某个像素宽度（768px 是引导程序的折叠点），请使用 css @media query 禁用变换。

(Demo)

@media (max-width: 768px) {
    .panel-group {
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none;
    }
}