Устройте Divs как письмо

Так что у меня этот код:Устройте Divs как письмо

код без 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>

Теперь я хотел бы изменить порядок его, так что я могу получить это:

Должно быть выполнено nsive и никогда не потерять порядок. Как я мог это сделать?

источник

2015-07-31 Baris Kilic

Не должно быть слишком сложно. возможно, используя определенные классы для первого и второго 6 элементов, тогда другие элементы в парах будут иметь другие классы (элементы должны быть обернуты в общий div) – trainoasis

Сначала вы должны попробовать сами, а затем приступить сюда, если у вас возникнут какие-либо проблемы при попытке !! SO не для того, чтобы сделать это и просить полный код! –

Я попросил подсказки, как это началось. trainoasis дал один, спасибо. –

Я просто знаком с основанием css, но я считаю, что это почти та же установка, что и 12, как магическое число. Кодируйте его как ширину сетки малые 2 столбца и оставьте несколько пустым в соответствии с вашим расположением.

EDIT: вы можете использовать пустые пространства как маленькие 4 столбца, или если вы можете использовать, по возможности, класс центра. Удачи :)

источник

2015-07-31 07:42:14 Medda86

Спасибо, идея помогла. Вот результат: https://jsfiddle.net/Lbev6vwx/1/ –

Добро пожаловать :) – Medda86

Устройте Divs как письмо

ответ

Смежные вопросы