Исходный источник, путающий источник

У меня есть такая строка:

<div class="row">
    <div class="small-12 small-push-12 large-6 columns">
        <!-- Content -->
    </div>
    <div class="small-12 small-pull-12 large-6 columns">
        <!-- Content -->
    </div>
</div>

В принципе, я хочу, чтобы второй столбец был вытащен до первого столбца, когда экран маленький, но держите его в правильном порядке для больших экранов.

Что я здесь делаю неправильно? Документ переполняется, как всегда.

Кроме того, я понимаю, что могу просто изменить порядок в самом HTML, и это сработает, но просто любопытно, возможно ли это сделать так.

Ответ 1

Ваш вопрос побудил меня взглянуть на исходный код Foundationations SCSS, чтобы увидеть, как была реализована сетка, так как, как и вы, мне не удалось заставить мои столбцы сдвинуться, как я хотел. В то время, когда мы находили ответ, я теперь забыл, что Идентификатор должен был узнать изначально, но, получив представление о том, как работает сетка, я знаю, что теперь будет намного проще в использовании, и я уверен, что моя работа верна. Я попытаюсь представить некоторые из этих прозрений здесь.

Простой ответ на ваш вопрос: "Нет, вы не можете сделать" Фонд "заменой блока столбцов так, как вы это делали. [Я называть их столбцами, а не столбцами сетки, которые относятся к базовым столбцам Foundations (обычно 12).] Предполагая, что это могло работать Id, скажем, что код, который вы написали, будет правильным. Фактическая причина, по которой он не работает, состоит в том, что * в базовом для классов малого, среднего, большого или любого размера носителя не существует 12-ти столбных или тяговых классов. Таким образом, когда размер экрана мультимедиа" маленький" (в вашем случае ) классы push и pull молча игнорируются CSS, и вы получаете два столбца на две строки в исходном порядке.

Общее правило заключается в том, что вы не можете нажимать или тянуть столбцы из одной строки в другую; вы можете перемещать их только по одной и той же строке.. Увидев, что я перечитал ваш вопрос, который начался: "У меня такая настройка строки..." Но это не так, поскольку намерение состоит в том, чтобы создать две строки. Я думаю, что можно создать несколько строк с одним определением столбцов (ов), это просто побочный эффект того, как работают поплавки CSS.

Вот что происходит (извините меня за антропоморфизацию атрибутов CSS... просто проще говорить о них как о "чем-то чем-то" и часто кажется лучшим способом четко понять, что происходит):

Для каждого указанного столбца его ширина определяется с использованием текущей ширины столбца сетки (плюс несколько "канавок" для интервала), умноженной на указанное количество столбцов сетки из используемого имени класса (большие-6, малые-2, и т.д.). Поскольку они получили атрибут float, они затем выстраиваются в одну сторону от следующего запуска в начале строки. Если в одной строке недостаточно места для отображения всех столбцов, строка столбцов разделяется и продолжается на "строке" ниже и т.д.; те, которые не подходят, перемещаются в следующую строку (и так далее). Без других классов каждый столбец будет отображаться в этой начальной позиции. Вот как несколько строк могут быть сформированы из определения одного столбца.

Когда вы добавляете классы push и pull, правые и левые атрибуты CSS добавляются к описанным выше. Смещение, определенное указанным классом push или pull, используется для вычисления относительного сдвига, который используется для изменения порядка столбцов, если это необходимо. Но левые и правые атрибуты CSS ничего не знают о том, откуда взялись эти столбцовые блоки, или о том, что есть какая-то строка, кроме той, над которой они работают. Таким образом, каждый столбец перемещается вдоль линии, где он был первоначально размещен, и если количество сдвига перемещает столбец за пределы границы строки, оно будет помещено (или частично помещено) влево или вправо от строки (и, возможно, вне поля зрения). Это причина, по которой ваш предлагаемый процесс не будет работать вообще, хотя в вашем случае, как упоминалось выше, вы использовали класс, который не был определен (small-push-12), и получил другой эффект. Если вы немного поиграете с более низкими пронумерованными классами push и pull (от 1 до 11), вы можете более четко увидеть, как столбцы выталкиваются частично из ряда. (как это делается в настоящее время Фондом, по крайней мере), и почему я теперь думаю (поскольку сначала я думал, что это может быть возможно), что возможность создания нескольких строк в базовом случае является полезным "побочным эффектом" того, как CSS работает.

Для тех, кто хочет улучшить понимание CSS или кто использует Foundation, я настоятельно рекомендую потратить некоторое время на работу через одну или несколько функций, которые Zurb реализовал в рамках. Я нахожу, что определения SCSS хорошо разработаны и чисто кодированы (хотя, возможно, не всем нравится, поскольку IMHO, CSS-кодирование мнения, похоже, столь же воспалительны, как мнения Mac/Windows и часто вызывают тот же пыл, когда выражаются).

Ответ 2

Нашел решение в отдельном потоке! Начните с заказа, который вы хотите в источнике для мобильных устройств, затем используйте классы push/pull, чтобы согнуть его для размеров LARGER. Другими словами, подходите к нему с противоположного конца.

Изменить порядок для столбца Foundation small-12