[A11y] Manage members of an organization - responsive after reflowing (#8301)

* Clear Reflow

* Better UI

* Vertical alignment

Author: zhhyu

src/NuGetGallery/Views/Organizations/_OrganizationAccountManageMembers.cshtml

@@ -34,30 +34,28 @@
             </div>
             @if (Model.CanManageMemberships)
             {
-                <div class="input-group col-xs-12">
+                <form>
                     <div class="row">
-                        <div class="col-xs-8">
-                            <input id="new-member-textbox" class="form-control" placeholder="Add existing NuGet.org user" data-bind="textInput: NewMemberUsername, submit: AddMember" aria-label="Enter username to add member"  />
+                        <div class="form-group col-sm-5">
+                            <input id="new-member-textbox" class="form-control" placeholder="Add existing NuGet.org user" data-bind="textInput: NewMemberUsername, submit: AddMember" aria-label="Enter username to add member"/>
                         </div>
-                        <div class="col-xs-3">
-                            <select class="form-control" data-bind="value: AddMemberRole, options: RoleNames" aria-labelledby="RoleNames">
-                            </select>
+                        <div class="form-group col-sm-3">
+                            <select class="form-control" data-bind="value: AddMemberRole, options: RoleNames" aria-labelledby="RoleNames"></select>
                         </div>
-                        <div class="text-right col-xs-1">
+                        <div class="col-sm-1">
                             <button class="btn btn-primary" type="submit" title="Add new member" aria-label="Add new member" data-bind="click: AddMember">Add</button>
                         </div>
                     </div>
-                </div>
+                </form>
                 <div data-bind="template: 'error-container'"></div>
             }
             <div class="member-item" data-bind="foreach: Members">
                 <hr data-bind="visible: $index()" />
                 <div class="row">
-                    <div class="col-xs-1 hidden-xs">
-                        <img data-bind="attr: { src: GravatarUrl, title: Username }" class="owner-image" alt="gravatar"
-                                height="36" width="36">
+                    <div class="col-sm-1 hidden-xs">
+                        <img data-bind="attr: { src: GravatarUrl, title: Username }" class="owner-image" alt="gravatar" height="36" width="36">
                     </div>
-                    <div class="col-xs-8 col-sm-7 member-column">
+                    <div class="col-xs-10 col-sm-6 member-column">
                         <div>
                             <a title="View Member Profile" data-bind="attr: { href: ProfileUrl }">
                                 <span data-bind="text: Username"></span>
@@ -70,31 +68,33 @@
                             <!-- /ko -->
                         </div>
                     </div>
-                    <div class="col-xs-3">
-                        @if (Model.CanManageMemberships)
-                        {
-                            <select class="form-control" aria-labelledby="OrganizationViewModel.RoleNames"
-                                    data-bind="value: SelectedRole, options: OrganizationViewModel.RoleNames, event: { change: ToggleIsAdmin }">
-                            </select>
-                        }
-                        else
-                        {
-                            <span data-bind="text: SelectedRole()"></span>
-                        }
-                    </div>
-                    <!-- ko if: IsCurrentUser || @(Model.CanManageMemberships ? "true" : "false") -->
-                    <div class="col-xs-1 text-right member-column">
+                    <div class="col-xs-2 col-sm-2 col-sm-push-3 member-column text-right">
+                        <!-- ko if: IsCurrentUser || @(Model.CanManageMemberships ? "true" : "false") -->
                         <div>
                             <span>
                                 <button class="btn-link" data-bind="click: DeleteMember, attr: { 'aria-label': 'Delete Member' }">
                                     <i class="ms-Icon ms-Icon--Cancel" aria-hidden="true"></i>
                                 </button>
                             </span>
                         </div>
+                        <!-- /ko -->
+                    </div>
+                    <div class="col-xs-12 col-sm-3 col-sm-pull-2 member-column">
+                        <div>
+                            @if (Model.CanManageMemberships)
+                            {
+                                <select class="form-control" aria-labelledby="OrganizationViewModel.RoleNames"
+                                        data-bind="value: SelectedRole, options: OrganizationViewModel.RoleNames, event: { change: ToggleIsAdmin }">
+                                </select>
+                            }
+                            else
+                            {
+                                <span data-bind="text: SelectedRole()"></span>
+                            }
+                        </div>
                     </div>
-                    <!-- /ko -->
                 </div>
             </div>
         </div>
     </div>
-</script>
+</script>