僅在移動視圖引導3上摺疊

Question

在桌面視圖中，「ul .item-description」應該是可見的，但在移動視圖上應該摺疊。我做到了，但在我看來，這是一個糟糕的決定。我該如何改進？另外，箭頭第一次不起作用。如何解決它？我試圖用js來解決這個問題，但是當我刷新頁面時，我看到箭是如何抽搐的。

對不起，我的英語很糟糕。

的jsfiddle - http://jsfiddle.net/p6t3brob/13/

HTML

<div class="collapsed-item"> 
    <div class="collapse-element-title visible-xs" data-toggle="collapse" data-target="#items">collapse-title 

    </div> 

    <ul class="item-description hidden-xs" id="items"> 
    <li class="title">title-text</li> 
    <li>item-item-item......</li> 
    <li>item-item-item......</li> 
    <li>item-item-item......</li> 
    <li>item-item-item......</li> 
    </ul> 
</div> 

CSS

.collapsed-item { 
    display: block; 
    outline: 1px solid red; 
    margin-top: 20px; 
    padding: 10px; 
} 

.collapse-element-title { 
    display: block; 
    outline: 1px solid orange; 
    position: relative; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 


.collapse-element-title:after { 
    display: block; 
    position: absolute; 
    top: 15px; 
    right: 10px; 
    width: 10px; 
    height: 10px; 
    border: 2px solid red; 
    border-top: none; 
    border-left: none; 
    transform: rotate(225deg); 
    content: ""; 
} 

.collapse-element-title.collapsed:after { 
    top: 10px; 
    transform: rotate(45deg); 
} 

ul li { 
    margin-bottom: 10px; 
} 

.collapse-element-title { 
    cursor: pointer; 
} 

.collapse-element-title { 
    margin-bottom: 20px; 
} 

@media(max-width: 767px) { 
    #items.in, 
    #items.collapsing { 
    display: block!important; 
    } 
} 
@media(min-width: 768px) { 
    #crownDesc.collapse { 
    display: block !important; 
    height: auto !important; 
    } 
} 

Answer 1

嘗試做這樣的http://jsfiddle.net/p6t3brob/15/

<div class="collapsed-item"> 
    <div class="collapse-element-title visible-xs collapsed" data-toggle="collapse" data-target="#items">collapse-title 

    </div> 

    <ul class="item-description hidden-xs collapse" id="items"> 
    <li class="title">title-text</li> 
    <li>item-item-item......</li> 
    <li>item-item-item......</li> 
    <li>item-item-item......</li> 
    <li>item-item-item......</li> 
    </ul> 
</div>