مرحباً @Lilly 
لقد استخدمتُ رمز CSS الخاص بك لإعادة ترتيب أقسام التنقل. يعمل بشكل جيد عندما تكون صفحة الويب بالحجم الكامل.
ومع ذلك، عندما أحاول تغيير حجم صفحة الويب إلى عرض أصغر، فإن إعدادات الترتيب في رمز CSS تصبح غير صالحة. يتحول القسم الأخير إلى القسم الثاني تمامًا كما في الصورة التالية:
وجدتُ أن خاصية display: block; في sidebar-sections تمنع order من التأثير. ثم، حاولتُ إضافة بعض الرموز إلى رمز CSS.
.sidebar-sections{
display: flex;
flex-direction: column;
}
والآن أصبح ترتيب الأقسام تحت السيطرة.