Arrange Divs as a letter [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
So I have this code:
https://jsfiddle.net/bdqgszv5/1/
Code without 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>
Now I would like to reorder it, so that I can get this:
It should be responsive and never loose the order.
How could I do this?

Answer 1

I'm just familiar with css foundation, but I believe is almost the same setup with 12 as the magical number. Code it as a grid width small 2 columns and leave some empty to match your layout.
EDIT: you can use the empty spaces as small 4 columns, or if you can use a center class if possible. Good luck :)