부트 스트랩을 사용하여 모바일 크기로 최소화하기위한 테이블 요소 재구성

Question

5 열 (즉, col1, col2 ..., col5)이있는 테이블이 있습니다. I는 그것이 모바일 크기를 최소화 할 때, 난 3-5 열이 I 비아 실현하고 연속으로 표시 할 :

td:nth-of-type(3):before { content: "col3"; } 
td:nth-of-type(4):before { content: "col4"; } 
td:nth-of-type(5):before { content: "col5"; } 

내가 열로서 COL1과 COL2 표시 할. 따라서 필요한 디자인은 다음과 같습니다 :

 |   | COL3 
COL1 | COL2 | COL4 
     |   | COL5 

부트 스트랩 CSS 사용법을 이해하지 못했습니다. 어떤 도움도 깊이 감사드립니다. 감사합니다

Answer 1

이 시도 :

<div class="row"> 
      <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4"> 
       <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">col1</div> 
      </div> 
      <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4"> 
       <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">col2</div> 
      </div> 
      <div class="col-lg-8 col-md-8 col-sm-4 col-xs-4"> 
       <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">col3</div> 
       <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">col4</div> 
       <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">col5</div> 
      </div> 
     </div> 

DEMO