inline form to vertical - html

Question

I have this form. I would like that until 768px width the form is inline, and afterwords the form should be vertical.
I am a little bit in doubt, if I have to set up a breakpoint, or bootstrap has a function that does that? As it is now, the form keeps being inline.
Does anybody knows how I can do that?
HTML
<div class="sign-up">
<p class="sub-header">#Helpers.GetText(CurrentPage, "signupHeaderText", CurrentPage.Parent)</p>
<form id="signupForm">
<div class="form-group">
<label class="sr-only" for="name">#Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)</label>
<input type="text" class="form-control" placeholder="#Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)" id="name" name="name" required />
</div>
<div class="form-group">
<label class="sr-only" for="email">#Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)</label>
<input type="email" class="form-control" id="email" name="email" placeholder="#Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">#Helpers.GetText(CurrentPage, "signupCtaButtonText", CurrentPage.Parent)</button>
</form>
</div>
SCSS:
.sign-up {
padding: $grid-gutter-width;
margin-bottom: $grid-gutter-width;
border-radius: 5px;
background-color: $white3;
.form-control {
box-shadow: none;
border-color: $white4;
}
.error {
border: 1px red solid;
}
label {
&#name,
&#email {
&-error {
display: none !important;
}
}
}
.btn {
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
border: none;
width: 100%;
}
}
.signup-wide {
padding-top:15px;
form {
display: flex;
justify-content: space-between;
.form-group {
width: 33%;
height: 40px;
max-width: 200px;
input {
height: 100%;
}
}
.btn {
padding-top: 10px;
padding-bottom: 10px;
height: 40px;
width: 33%;
}
}
}

Answer 1

Bootsrap has system class for this, use <form class="form-inline">