Comment pile divs verticalement sur mobile, mais les garder horizontale sur la version web?

J'ai ajouté des balises div pour créer deux colonnes dans un wordpress post. Voici le code que j'ai utilisé:

#container {
   width:100%;
}
#one {
   width:50%;
   float:left;
}
#two {
   width:50%;
   float:right;
}

J'ai ajouté le code ci-dessus à mon style.fichier css.

Lors de l'affichage sur ma page tout semble parfait. Cependant, lors de l'affichage sur mobile, il semble mauvaise. Le Code ci-dessous est ce que j'ai ajouté à la poste:

<div id="container">
<div id="one">content here</div>
<div id="two">content here</div>
</div>

Ce que je voudrais faire est d'empiler les divs verticalement lors de l'affichage sur un appareil mobile. Est-il une manière assez simple de le faire pour quelqu'un qui a limité le codage de l'expérience?

Grâce

vous pouvez utiliser une interface framework comme bootstrap (bootstrap.com)

OriginalL'auteur user3766432 | 2015-03-09

  1. 7

    Jeter un oeil à des requêtes de média.

    @media all and (max-width:800px) //800px for tablets and phones.
{
    #one, #two
    {
        display: block; 
        float: none; 
        width: 100%;
    }
}

    Noter que cela a à aller au bout de votre code ci-dessus, sauf si vous prenez les sélecteurs de plus en plus spécifiques.

    Génial, cela a fonctionné. Je n'ai pas essayer les autres suggestions, car cela semblait être le moyen le plus facile pour moi. Merci à tous.

    OriginalL'auteur David