27799 sujets

CSS et mise en forme, CSS3

	  <section>
		 <div class="container">
			<div class="row">
			   <div class="col-sm-4 offset-sm-1 order-1">
				  <h1>BRANDING SERVICES</h1>
			   </div>
			</div>
			<div class="row mt-3">
			   <div class="col-sm-4 offset-sm-1 order-sm-2 order-2">
				  <h3>OUR ADVANTAGE<br><span style="text-transform:capitalize">Powerful Simplicity</span></h3>
			   </div>
			   <div class="col-sm-4 offset-sm-1 order-sm-5 order-3">
				  <h5>Pre-Opening</h5>
				  <p>Our targets: Build up a firm foundation for your hotel brand to ensure business purposes</p>
			   </div>
			</div>
			<div class="row mt-3">
				   <div class="col-sm-4 offset-sm-1 order-sm-3 order-4">
					  <p>The greatest brands make life simple. By simplifying customer experience in a complex world, we help your brand win customer loyalty, which drives business results and creates lifelong value.</p>
				   </div>
				   <div class="col-sm-4 offset-sm-1 order-sm-6 order-5">
					  <p>Brand strategy<br>Brand identity &amp; application: stationery, signage system, OS&amp;E&hellip;</p>
					  <p>Photography<br>Website: construction, SEO&hellip;<br>Brochure &amp; leaflet<br>Pre-opening campaign</p>
				   </div>
			</div>
			<div class="row mt-3">
					   <div class="col-sm-4 offset-sm-1 order-sm-4 order-6">
						  <h5>Local understanding</h5>
						  <p>We learn the region’s languages and meet the local across the region to learn from its cultures – which helps your business obtain the most advantageous factor of creating a successful brand in the hospitality industry.</p>
						  <h5>Global standard</h5>
						  <p>With many years experience in the field of brand development in many countries around the world, we help your brand succeed like we helped other brands have succeeded before.</p>
					   </div>
					   <div class="col-sm-4 offset-sm-1 order-sm-7 order-7">
						  <h5>Opening</h5>
						  <p>Our targets: Ensure a grand opening that captures the attention of the public and the media<br>Opening communication<br>Opening event</p>
						  <h5>Operation</h5>
						  <p>Keep your hotel brand present in the media and control the brand image<br>Website management<br>Social media management<br>Branding communications campaign<br>Promotion campaigns</p>
					   </div>
				</div>
		 </div>
	  </section>


Bonjour. Sur Bootstrap 4, je ne parviens pas à classer les éléments de la première colonne les uns à la suite des autres sur mobile. Lorsque je redimensionne ma fenêtre de navigateur en mode mobile, le order-sm-5 (Pre-Opening…) se retrouve toujours en 3ème position au lieu de la 5ème. Avez-vous une idée ?
Administrateur
Bonjour,

chaque élément .row est indépendant des autres : c'est un flex container et chacun de ses enfants interagit avec les autres enfants de cet élément .row -là, pas avec ceux des autres .row !
Idem avec une grille qui utiliserait Grid layout : tu ne pourras pas panacher les grid items de 2 grid container comme tu le souhaites (par contre tu pourras faire bien d'autres choses qui pourraient ou non convenir ici...).

Ici, si tu as disons .row > A puis .row > B et C puis .row > D et E,
ceci est possible :
(A) (B C) (D E)
(A) (D E) (B C)
mais ceci n'est pas possible :
(A) B D C E
(A) B D E C

Je ne crois pas que .row soit limité à 1 ligne de 12 max, tu peux coller tous tes éléments dans le même (enfin peut-être pas tous mais tu peux réunir 2 ou 3 .row ensemble).
edit: ce que je veux dire par là, c'est qu'un seul .row peut avoir 9 éléments .col-sm-4 et 4*9 = 36 soit 3 lignes puisque BS est une grille de 12.
C'était foireux avec BS2 du temps des flottants, mais plus avec BS4 avec Flexbox. Par contre à voir déjà si ce que tu veux faire est possible (sans crobards, aucune idée) et ensuite si la grille BS empêche le comportement des flex items qui tiennent à prendre tout le restant de place ou à passer à la ligne quand la précédente est encombrée (je dirais que oui mais pas testé).

Note : réordonner des blocs d'une ligne à l'autre va poser des problèmes d'accessibilité : l'ordre du DOM n'a plus de sens par rapport à ce qui est affiché à l'écran et un.e utilisateurice du clavier va se faire balader d'un bloc à l'autre de la page.
Ceci dit, si tu veux réordonner librement des blocs, qu'ils peuvent avoir tous le même parent alors Grid layout te laisse 1/ définir une grille assez simplement 2/ placer tes éléments dedans de pas mal de façons différentes ("colonne 3 ligne 1" et/ou grid-area etc) et réordonner pareil que Flexbox.
Modifié par Felipe (02 Aug 2021 - 18:33)
Meilleure solution
Bonjour Felipe, merci beaucoup de m'avoir répondu.
Trop compliqué pour moi, mais j'ai trouvé une parade: d-none d-sm-block (container masqué sur mobile) et d-block d-sm-none (container uniquement pour les mobiles). Tant pis pour le référencement.