Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it L'avatar di supermac
    Registrato dal
    Jun 2001
    Messaggi
    1,624

    [Bootstrap 3] push pull di colonne

    Spero di essere nel forum giusto, a rigore Bootstrap sarebbe JS ma questa è faccenda di stili e classi per cui provo a postare qui.
    Magari è una stupidata... è che non so come si faccia (l'ho fatto con Foundation ma non riesco a farlo con Bootstrap):
    In un layout di questo tipo:
    codice:
    <div class="col-xs-12 col-lg-6"> colonna1</div>
    <div class="col-xs-12 col-lg-6"> colonna2</div>
    mi va benissimo che con schermi grandi si vedano nell'ordine indicato ma vorrei che quando vale la classe xs (cioè dimensioni di schermo piccole) la colonna2 venisse visualizzata prima della colonna1...
    commesefà?
    W la Ferari effetrenavenave!
    il computer è un somaro veloce! (neanche tanto ndr)

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,497
    Sezione corretta.
    In Bootstrap 3 puoi usare le classi col-push- e col-pull-

    Essendo mobile-first ti conviene però partire da una disposizione delle colonne nell'ordine in cui devono essere mostrate su mobile (quindi le colonne già invertite)

    Potresti avere quindi una cosa del genere:
    codice:
    <div class="col-xs-12 col-lg-6 col-lg-push-6"> colonna2</div>
    <div class="col-xs-12 col-lg-6 col-lg-pull-6"> colonna1</div>
    .
    In alternativa, se tu avessi intenzione di usare Bootstrap 4 è possibile usare la classe order sulle colonne oppue flex-column-reverse (dell'utility flex-direction) sulla riga.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it L'avatar di supermac
    Registrato dal
    Jun 2001
    Messaggi
    1,624
    Gentilissimo grazie.
    Stavo proprio guardando BS4... ma la classe order come va usata?
    W la Ferari effetrenavenave!
    il computer è un somaro veloce! (neanche tanto ndr)

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,497
    Parti sempre dalla disposizione per mobile, a quel punto puoi avere una cosa del genere:

    codice:
    <div class="col-xs-12 col-lg-6 order-lg-2"> colonna2</div>
    <div class="col-xs-12 col-lg-6 order-lg-1"> colonna1</div>
    .
    o anche:
    codice:
    <div class="col-xs-12 col-lg-6 order-lg-last"> colonna2</div>
    <div class="col-xs-12 col-lg-6 order-lg-first"> colonna1</div>
    .
    oppure semplicemente, applicandolo ad una colonna:
    codice:
    <div class="col-xs-12 col-lg-6 order-lg-2"> colonna2</div>
    <div class="col-xs-12 col-lg-6"> colonna1</div>
    .
    oppure:
    codice:
    <div class="col-xs-12 col-lg-6 order-lg-last"> colonna2</div>
    <div class="col-xs-12 col-lg-6"> colonna1</div>
    .
    oppure:
    codice:
    <div class="col-xs-12 col-lg-6"> colonna2</div>
    <div class="col-xs-12 col-lg-6 order-lg-first"> colonna1</div>
    .
    o altre sintassi simili.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it L'avatar di supermac
    Registrato dal
    Jun 2001
    Messaggi
    1,624
    Esaustivo, grazie
    W la Ferari effetrenavenave!
    il computer è un somaro veloce! (neanche tanto ndr)

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.