Hi all,

I’m trying to create this mockup using ReactJS and I can’t seem to make my code work. Notice how the profile pic is beside the search bar on mobile but it’s beside the button on tablet and desktop. I tried using order but it didn’t work. I also tried inline block but I think I wasn’t able to really figure it out because I’m used to using flex box. This is my code

import "./Header.scss";

function Header() {
    return (
        <header className="header">
            <img className="header__logo" src="src/assets/images/BrainFlix-logo.svg" alt="BrainFlix Logo" />
            <div className="header__content">
                <div className="header__search-profile">
                    <input className="header__search-bar" type="text" placeholder="Search" />
                    <img className="header__profile-pic" src="src/assets/images/Mohan-muruge.jpg" alt="side profile of Mohan" />
                </div>
                <button className="header__button--upload" type="submit">Upload</button>
            </div>
        </header>
    )
}

export default Header;

This is my sass

.header__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    @include tablet {
        flex-direction: row;
        justify-content: space-between;
    }
}

.header__search-profile {
    display: flex;
    align-items: center;
    width: 100%;

    @include tablet {
        width: auto;
        order: 1;
    }
}

.header__search-bar {
    flex-grow: 1;
    padding: 0.75rem;
    margin-right: 1rem;
    background: url('../../assets/icons/search.svg') no-repeat 10px center / 20px 20px;
    font-family: inherit;
    border: $border;
    background-color: $alabaster;
    color: $brainflix-black;
    font-family: inherit;
    resize: none;

    @include tablet {
        width: 100%;
    }

    &::placeholder {
        color: $brainflix-black;
        font-size: 0.8125rem;

        @include tablet {
            font-size: 0.875rem;
        }
    }
}

.header__profile-pic {
    @include avatar-style(2.25rem, 2.25rem, 1rem);
    object-fit: cover;
    object-position: 10%;
    order: 2;

    @include tablet {
        order: 2;
        margin-left: 1rem;
    }
}

.header__button--upload {
    margin-top: 1rem;
    border-radius: .25rem;
    padding: 0 2rem;
    width: 100%;
    height: 2.5rem;
    border: none;
    font-size: 13px;
    font-family: inherit;
    font-weight: $demi;
    text-transform: uppercase;
    background-color: $brainflix-blue;
    color: $white;
    cursor: pointer;

    order: 3;

    @include tablet {
        order: 2;
        width: 9.375rem;
        padding: 0 2rem;
        margin-top: 0;
    }
}

.button__icon--upload {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}