これをブートストラップでどのように達成するには？

Question

私はこれをどのようにマークアップするのか考えていませんが、私を助けてくれますか？

Answer 1

* { 
 
    box-sizing: border-box; 
 
} 
 
.wrapper { 
 
    background-color: #ddd; 
 
} 
 
.flex-items { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-flow: wrap; 
 
} 
 
.flex-item { 
 
    flex: 1 1 50%; 
 
    border-bottom: 1px #999 solid; 
 
} 
 
.flex-item:nth-child(odd) { 
 
    border-right: 1px #999 solid; 
 
} 
 
.service { 
 
    position: relative; 
 
    padding: 10px 10px 10px 140px; 
 
} 
 
.service__image-wrapper { 
 
    background-color: #0EBEFF; 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 15px; 
 
    height: 100px; 
 
    width: 100px; 
 
    transform: skewx(-10deg); 
 
} 
 
.service__image { 
 
    position: absolute; 
 
    top: 25px; 
 
    left: 35px; 
 
    border: 1px white solid; 
 
    height: 50px; 
 
    width: 30px; 
 
    transform: skewx(10deg); 
 
} 
 
.service__title { 
 
    color: orange; 
 
}

<div class="wrapper"> 
 
    <ul class="flex-items"> 
 
    <li class="flex-item"> 
 
     <!-- media block --> 
 
     <div class="service"> 
 
     <span class="service__image-wrapper"> 
 
      <span class="service__image"></span> 
 
     </span> 
 
     <h3 class="service__title">Brand Identity</h3> 
 
     <p class="sercie__description"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti? 
 
     </p> 
 
     </div> 
 
    </li> 
 
    <li class="flex-item"> 
 
     <!-- media block --> 
 
     <div class="service"> 
 
     <span class="service__image-wrapper"> 
 
      <span class="service__image"></span> 
 
     </span> 
 
     <h3 class="service__title">Brand Identity</h3> 
 
     <p class="sercie__description"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti? 
 
     </p> 
 
     </div> 
 
    </li> 
 
    <li class="flex-item"> 
 
     <!-- media block --> 
 
     <div class="service"> 
 
     <span class="service__image-wrapper"> 
 
      <span class="service__image"></span> 
 
     </span> 
 
     <h3 class="service__title">Brand Identity</h3> 
 
     <p class="sercie__description"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti? 
 
     </p> 
 
     </div> 
 
    </li> 
 
    <li class="flex-item"> 
 
     <!-- media block --> 
 
     <div class="service"> 
 
     <span class="service__image-wrapper"> 
 
      <span class="service__image"></span> 
 
     </span> 
 
     <h3 class="service__title">Brand Identity</h3> 
 
     <p class="sercie__description"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti? 
 
     </p> 
 
     </div> 
 
    </li> 
 
    <li class="flex-item"> 
 
     <!-- media block --> 
 
     <div class="service"> 
 
     <span class="service__image-wrapper"> 
 
      <span class="service__image"></span> 
 
     </span> 
 
     <h3 class="service__title">Brand Identity</h3> 
 
     <p class="sercie__description"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti? 
 
     </p> 
 
     </div> 
 
    </li> 
 
    <li class="flex-item"> 
 
     <!-- media block --> 
 
     <div class="service"> 
 
     <span class="service__image-wrapper"> 
 
      <span class="service__image"></span> 
 
     </span> 
 
     <h3 class="service__title">Brand Identity</h3> 
 
     <p class="sercie__description"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique unde nisi corrupti? 
 
     </p> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

これはあなたにそれについて移動する方法のアイデアを与えることです...これは完璧なソリューションにも、近くではありません。 HTMLテンプレートのレイアウトに入る要素はたくさんあります。基本的な例を得るために最も速いことをやっただけです。それがあなたを助けることを願っています。