Come rendere quattro moduli responsive? Template basato su protostar e bootstrap

[joored]

Sto modificando un template responsive per joomla 2.5 basato su protostar e bootstrap.
Ho creato un nuovo blocco "top-b" al cui interno si trovano quattro moduli
come indicato nello schema seguente:

 |---------------------- top-b -----------------------|
 |     top-b1     top-b2    top-b3    top-b4     |

dovrei rendere i quattro moduli (top-b1, top-b2, top-b3, top-b4) "responsive".
Ho fatto diverse prove ma senza successo.
Qualcuno può darmi una dritta?

Il codice inserito nel file index.php è questo:

Codice: [Seleziona]

       <!-- Top-b -->         
      <div id="top-b">   
        <?php if($this->countModules('top-b1')) : ?>
        <div class="top-b1">
            <jdoc:include type="modules" name="top-b1" style="xhtml" />
        </div>
        <?php endif; ?>     
        <?php if($this->countModules('top-b2')) : ?>
       <div class="top-b2">
            <jdoc:include type="modules" name="top-b2" style="xhtml" />
        </div>
        <?php endif; ?>                       
        <?php if($this->countModules('top-b3')) : ?>
        <div class="top-b3">
            <jdoc:include type="modules" name="top-b3" style="xhtml" />
        </div>
        <?php endif; ?>                   
        <?php if($this->countModules('top-b4')) : ?>
       <div class="top-b4">
            <jdoc:include type="modules" name="top-b4" style="xhtml" />
        </div>
        <?php endif; ?> 
       </div>
       <!-- End Top-b --> 


Il codice inserito nel file template.css è questo:

Codice: [Seleziona]

/* Top-b */
.top-b {
  padding: 5px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.075);
  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
  margin-bottom: 10px;
}

.top-b {
  width:21.25%;
  float:left;
  /*margin-right:20px;*/
  min-height:100px;
  position:relative;
}

.top-b1 {
  width:21.25%;
  float:left;
  margin-right:5%;
  overflow: hidden;
}

.top-b2 {
  width:21.25%;
  float:left;
  margin-right:5%;
  overflow: hidden;
}

.top-b3 {
  width:21.25%;
  float:left;
  margin-right:5%;
  overflow: hidden;
}
.top-b4 {
  width:21.25%;
  float:right;
  margin-right:0;
  overflow: hidden;
}

/* ---------------------*/

[giusebos]

Cortesemente, se vuoi pubblicare del codice, inseriscilo fra i tag code utilizzando l'iconcina del cancelletto disponibile nell'editor oppure scrivendo i tag manualmente.