ترتیب نمایش المنت ها در موبایل

3 سال پیش توسط imaniy مطرح شد
آفلاین
user-avatar
imaniy ( 13698 تجربه )
3 سال پیش
تخصص : طراح وب

لینک کوتاه اشتراک گذاری

0

سلام من یک صفحه با بوت استرپ طراحی کردم که اول اومدم navbar رو طراحی کردم بعد قسمت پست ها بعد سایدبار و بعدش قسمت صفحه بندی یا همون pagination حالا این تو نسخه موبایل میاد دقیقا به همون صورتی که من کد رو نوشتم نشون میده یعنی navbar که بالا هست بعد میاد پست ها رو نشون میده و بعد سایدبار و بعدش میاد قسمت صفحه بندی رو نشون میده... حالا من چیکار کنم که قسمت صفحه بندی رو قبل سایدبار بیاد نشون بده ؟ ایا بوسیله @media یا قابلیت های flex میشه اینکار رو کرد؟ میشه کسی که بلده توضیح بده؟ ممنون از شما.

بهترین پاسخ
آفلاین
user-avatar
محمد یوسفی پور
3 سال پیش

https://getbootstrap.com/docs/4.1/layout/grid/
به این لینک مراجعه کن به قسمت Grid Option احتمالا مشکلت در رابطه با xs حل بشه چون حذف شده.
بعد من نگا کردم با توجه به flex که به bootstrap اصافه شده از order به عنوان یک کلاس میتونی استفاده کنی. به این شکل:
.order-1

آفلاین
user-avatar
سیدعلی موسوی ( 142798 تجربه )
3 سال پیش
تخصص : سی شارپ و پی اچ پی

لینک کوتاه اشتراک گذاری

آفلاین
user-avatar
imaniy ( 13698 تجربه )
3 سال پیش
تخصص : طراح وب

لینک کوتاه اشتراک گذاری

0

سید جان من بوت استرپ ۴ دارم و با order اینکار رو کردم فقط مشکلی که وجود داره اینه که ما در بوت استرپ 3 سایزهای :
xs
sm
md
lg
xl
رو داشتیم ولی تو بوت استرپ 4 ما xs که همون (Extra Small) هستش رو نداریم و این دردسر ساز شده برای من باید چیکار کنم؟

من کد رو به این صورت نوشتم ولی xs کار نمیکنه :

https://liveweave.com/xcWmBR#&togetherjs=S4pVbKETHL

آفلاین
user-avatar
محمد یوسفی پور ( 10142 تجربه )
3 سال پیش
تخصص : برنامه نویس، لینوکس، طراحی وب

لینک کوتاه اشتراک گذاری

1

برای xs از این استفاده کن
.col-
برای جابه جایی اون قسمت هم میتونی از push و pull استفاده کنی.

آفلاین
user-avatar
imaniy ( 13698 تجربه )
3 سال پیش
تخصص : طراح وب

لینک کوتاه اشتراک گذاری

0

محمد جان یعنی اینطوری؟
order-col-2
اخه این کار نمیکنه من میخام xs رو تو order بکار ببرم در ضمن push و pull تو بوت استرپ 3 بود تو 4 نیست فک کنم و order جاش رو گرفته.

آفلاین
user-avatar
محمد یوسفی پور ( 10142 تجربه )
3 سال پیش
تخصص : برنامه نویس، لینوکس، طراحی وب

لینک کوتاه اشتراک گذاری

1

https://getbootstrap.com/docs/4.1/layout/grid/
به این لینک مراجعه کن به قسمت Grid Option احتمالا مشکلت در رابطه با xs حل بشه چون حذف شده.
بعد من نگا کردم با توجه به flex که به bootstrap اصافه شده از order به عنوان یک کلاس میتونی استفاده کنی. به این شکل:
.order-1

برای ارسال پاسخ لازم است، ابتدا وارد سایت شوید.