安排Divs作为一封信

Question

所以我有这段代码：

https://jsfiddle.net/bdqgszv5/1/

没有jsfiddle的代码：

<section id="aussteller" class="row separated">
                <div class="section-header text-center">
                    <h2>Aussteller</h2>
                    <h4>Unsere Aussteller informieren Sie über die neusten Innovationen</h4>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="aussteller">
                        <div class="aussteller-info">
                            <div class="aussteller-photo">
                                <img src="http://allbrochures.net/wp-content/uploads/2015/04/ricoh-logo.jpg" alt="Ricoh">
                            </div>                              
                        </div>
                        <h3>Ricoh</h3>
                        <p>Zeigt uns im RICOH-truck die neusten Drucksysteme</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="aussteller">
                        <div class="aussteller-info">
                            <div class="aussteller-photo">
                                <img src="http://reonline.com/wp-content/uploads/2014/01/lexmark-logo-18863_640x480.jpg" style="width: 220px; height: 220px" alt="Lexmark">
                            </div>
                        </div>
                        <h3>Lexmark</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="aussteller">
                        <div class="aussteller-info">
                            <div class="aussteller-photo">
                                <img src="http://www.samsung.com/us/images/common/samsung-logo.jpg" style="width: 220px; height: 220px" alt="Samsung">
                            </div>
                        </div>
                        <h3>Samsung</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="aussteller">
                        <div class="aussteller-info">
                            <div class="aussteller-photo">
                                <img src="http://cf.juggle-images.com/matte/white/280x280/papyrus-logo-primary.jpg" style="width: 220px; height: 220px" alt="Papyrus">
                            </div>
                        </div>
                        <h3>Papyrus</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="aussteller">
                        <div class="aussteller-info">
                            <div class="aussteller-photo">
                                <img src="http://seeklogo.com/images/F/Fujitsu-logo-5CECF13A58-seeklogo.com.gif" style="width: 220px; height: 220px" alt="aussteller 5">
                            </div>
                        </div>
                        <h3>Fujitsu</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,  sed do eiusmod tempor</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="aussteller">
                        <div class="aussteller-info">
                            <div class="aussteller-photo">
                                <img src="http://a1135.phobos.apple.com/us/r30/Purple4/v4/5f/85/bd/5f85bd7c-f6f9-6544-25fb-f00fd604b21a/mzl.snejseuw.png" style="width: 220px; height: 220px" alt="aussteller 6">
                            </div>
                        </div>
                        <h3>ELO</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </div>
                </div>
            </section>

现在我想重新排序，以便我可以得到这个：

它应该是响应式的，永远不会松动订单。 我怎么能这样做？

Answer 1

我只是熟悉css基础，但我相信几乎与12个神奇数字相同的设置。将其编码为网格宽度小2列，并留下一些空白以匹配您的布局。

编辑：您可以将空格用作小4列，或者如果可以的话可以使用中心类。祝你好运：）