Bourbon/Neat Grid 2.0 numéro de changement

Question

J'ai une grille de grille 2.0 personnalisée où je veux pousser les colonnes à différentes zones en fonction de la taille de l'écran. Par exemple, sur mobile, le footer-submit est empilé en 1er. Sur le bureau, il est poussé à l'extrême droite de l'écran. Ce que j'ai fonctionne comme prévu sauf leur calcul peut être légèrement éteint. Mais je suis toujours au courant de cette grille alors peut-être que je suis en train de mettre en place bizarrement.

$no-gutter-grid: (
    columns: 12, 
    gutter: 0, 
); 

footer { 
    @include grid-container; 
} 

.footer-nav { 
    @include grid-column(12, $no-gutter-grid); 
    @include grid-media($grid-tablet-up) { 
    @include grid-column(10, $no-gutter-grid); 
    @include grid-shift(-2); 
    } 
    color: $white; 
    nav { 
    margin-bottom: 25px; 
    } 
} 

.footer-submit { 
    @include grid-column(12, $no-gutter-grid); 
    @include grid-media($grid-tablet-up) { 
    @include grid-column(2, $no-gutter-grid); 
    @include grid-shift(10); 
    } 
} 

Et mon html:

<footer> 
    <div class="newsletter"> 
    <div> 
     <p>Subscribe to our newsletter</p> 
     <input type="text" placeholder="Name" /> 
     <input type="email" placeholder="Email" /> 
     <button class="button-black" type="submit">Sign Up</button> 
    </div> 
    </div> 
    <div class="footer"> 
    <div class="footer-submit"> 
     <a href="#" class="button-orange">Submit A Story</a> 
    </div> 
    <div class="footer-nav"> 
     <nav> 
     <a href="/" class="logo-link"><img class="logo" src="{% static 'img/SAHARA_LOGO_OFFICIALS_WHITE.png' %}"></a> 
     <!--TODO change to dynamic links--> 
     <a href="#">About</a> 
     <a href="#">Contact Us</a> 
     <a href="#">Careers</a> 
     <a href="#">Support Us</a> 
     <a href="#">Advertise</a> 
     <a href="#">NewsSources</a> 
     </nav> 
     <div class="legal"> 
     <p>&#169;Copyright 2017 Sahara Reporters, Inc. All Rights Reserved.</p> 
     <span> 
      <a href="#">Privacy Policiy</a>/
      <a href="#">Terms of Use</a> 
     </span> 


     </div> 
    </div> 

    </div> 
</footer> 

Answer 1

Pour vous assurer que je comprends, vous avez un bouton d'envoi empilés au-dessus d'une navigation tout sur le bureau. Lorsque l'utilisateur frappe la tablette, vous voulez que le bouton "Soumettre" apparaisse à droite de la navigation.

Si c'est le cas, vous devez utiliser la propriété direction dans la grille personnalisée. Il ressemblerait à quelque chose comme ceci:

$no-gutter-grid_tablet: (
    columns: 12, 
    gutter: 0, 
    direction: rtl, 
); 

$no-gutter-grid: (
    columns: 12, 
    gutter: 0, 
); 

footer { 
    @include grid-container; 
} 

.footer-nav { 
    @include grid-column(12, $no-gutter-grid); 
    @include grid-media($grid-tablet-up) { 
    @include grid-column(10, $no-gutter-grid_tablet); 
    } 
    color: $white; 
    nav { 
    margin-bottom: 25px; 
    } 
} 

.footer-submit { 
    @include grid-column(12, $no-gutter-grid); 
    @include grid-media($grid-tablet-up) { 
    @include grid-column(2, $no-gutter-grid_tablet); 
    } 
} 

Maintenant que vous allez de droite à gauche, vous n'avez rien à changer. Au lieu de cela, il va simplement inverser l'ordre dans lequel les divs sont affichés.

Espérons que cela aide!