qzpoKm

index.html

<div class="custom">
    <div class="col-xs-6 col-md-4">
        <ul class="list-unstyled">
            <li><span>1</span>VEM制震系統VEM制震系統VEM制震系統VEM制震系統VEM制震系統VEM制震系統VEM制震系統</li>
            <li><span>2</span>陶粒輕隔間陶粒輕隔間陶粒輕隔間陶粒輕隔間陶粒輕隔間陶粒輕隔間</li>
            <li><span>3</span>BIPV太陽能光電系統</li>
        </ul>
    </div>
    <div class="col-xs-6 col-md-4">
        <ul class="list-unstyled flexBox">
            <li><span>4</span>氟碳烤漆氣密窗氟碳烤漆氣密窗氟碳烤漆氣密窗氟碳烤漆氣密窗氟碳烤漆氣密窗氟碳烤漆氣密窗氟碳烤漆氣密窗</li>
            <li><span>5</span>全戶25cm中空制音樓板</li>
        </ul>
    </div>
</div>

qzpokm.markdown

qzpoKm

A Pen by Captain Anonymous on CodePen.

License.

style.css

.custom{
  display: flex;
}

.custom [class*="col"]{
  flex: 1;
}

.custom [class*="col"] + [class*="col"]{
  margin-left: 1rem;
}

.list-unstyled{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list-unstyled li{
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 1.5rem; 
  line-height: 1.5;
}

.list-unstyled li span{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  color: white;
  background-color: red;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 3px;
}

.list-unstyled li + li{
  margin-top: .75rem;
}